<!-- 组件：导航树配置-导航Tab名称配置-自定义SQL -->
<!-- created by chengfei 2023/4/20 -->
<template>
    <div>
        <a-form-model :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row>
                <a-col :span="24">
                    <a-form-model-item :label="i18n('customSql','自定义SQL')" :label-col="{ span: 3 }" :wrapper-col="{ span: 19 }">
                        <rx-input-button ref="sql" @click="openCustomQuery" v-model="form.sql" />
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('sqlTextField','文本字段')">
                        <a-select
                            :getPopupContainer="(p) => p.parentNode"
                            :options="sqlFields"
                            v-model="form.sqlTextField"
                        />
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('sqlValueField','数值字段')">
                        <a-select
                            :getPopupContainer="(p) => p.parentNode"
                            :options="sqlFields"
                            v-model="form.sqlValueField"
                        />
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('sqlParentField','父ID字段')">
                        <a-select
                            :getPopupContainer="(p) => p.parentNode"
                            :options="sqlFields"
                            v-model="form.sqlParentField"
                        />
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
    </div>
</template>

<script>
import { Dialog } from "@lowcode/jpaas-common-lib"
export default {
    name: 'TabTreeSettingSql',
    components: { Dialog },
    props: {
        defaultValue: { type: Object, default: () => {} },
    },
    data() {
        return {
            form: {
                sql: '',
                sqlKey:'',
                sqlTextField: '',
                sqlValueField: '',
                sqlParentField: ''
            },
            sqlFields: [],
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCodegenBusiness.edit2.TabTreeConfSetting",key);
        },
        openCustomQuery(vm) {
            Dialog.openCustomDataDialog(
                {
                    curVm: this,
                    widthHeight: ['1200px', '600px'],
                },
                (self, data) => {
                    self.loadFields(data)
                    self.form.sqlKey=data.key;
                    vm.setVal(data.key, data.name)
                }
            )
        },
        loadFields(row) {
            var fieldStr = row.resultField
            if (fieldStr) {
                var fileds = JSON.parse(fieldStr)
                var ary = fileds.map(function (item) {
                    return {
                        value: item.fieldName,
                        label: item.comment,
                    }
                })
                this.sqlFields = ary
            }
        },
        init() {
            const { type, setting } = this.defaultValue
            if (type === 'sql') {
                Object.keys(this.form).forEach(key => {
                    this.form[key] = setting[key] || ''
                })
            }
        },
        getData() {
            return this.form
        },
    },
}
</script>

<style scoped></style>
